<template>
  <div>
    <CommonCard title="今日订单" :value="numberFormat(orderToday)">
    <!-- 插槽标签可以写div,默认时template -->
    <!-- ref不能写在template里面 -->
      <div ref="lineChartRef" style="width:100%;height:100%"></div>

      <template #foot>
        <span>昨日订单量</span>
        <span class="emphasis">{{moneyFormat(orderLastDay)}}</span>
      </template>
    </CommonCard>
  </div>
</template>

<script lang="ts">
import CommonCard from './CommonCard.vue'
export default {
  name: 'TodayOrder',
  components: {
    CommonCard
}
}
</script>

<script  lang="ts" setup>
import { ref,onMounted ,computed,watch} from "vue";
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts'
import useFormat from '@/hooks/useFormat'
import { useReportDataStore } from '@/stores/reportData'
const {numberFormat,moneyFormat} = useFormat()
const lineChartRef = ref()
let chart: EChartsType
const reportDataStore = useReportDataStore()
// A. 今日订单
const orderToday = computed(()=> reportDataStore.reportData.orderToday)
// B. 昨日订单
const orderLastDay = computed(()=> reportDataStore.reportData.orderLastDay)
// C. 订单趋势 订单动态
const orderTrend = computed(()=>reportDataStore.reportData.orderTrend ||[])
// D. X轴数据
const orderTrendAxis = computed(()=>reportDataStore.reportData.orderUserTrendAxis||[])

const getOption = () => {
  return {
    xAxis: {
      //两侧不留白
      boundaryGap: false, 
      // x轴数据列表
      //值使用获取来的数据,放在 .value里面
    data:orderTrendAxis.value
    },
    yAxis: {
      //不显示y轴及标线
      show:false  
    },
    series: [
      {
        name: '实时订单数',
        type: 'line',
        // 列表数据,y轴书局
        data: orderTrend.value,
        // 线条光滑
        smooth: true,
        // 区域的样式
        areaStyle: {
          color: 'purple'
        },
        // 折线点的样式
        itemStyle: {
          opacity: 1
        },
        // 线的样式
        lineStyle: {
          opacity: 1
      }
      }
    ],
     // 图表在坐标中显示的位置
     grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    },
    // 显示提示
    tooltip: {
      trigger: 'axis',
      confine: true
    }
   } 
}
onMounted(() => {
  chart = echarts.init(lineChartRef.value)
  chart.setOption(getOption())
//图标跟随页面响应式变化
  window.addEventListener('resize', () => {
    chart && chart.resize()
  })
})

watch(orderLastDay, () => {
  //数据时发送请求从store仓库拿过来的,是异步的,有可能图标渲染完毕之后数据还没有,因此要添加监视,有有了数据之后在渲染
  chart.setOption(getOption())
})
</script>

<style lang="scss" scoped>

</style>